<template>
  <div class="register-form">
    <center> <h2>注册界面</h2> </center>
    <form @submit.prevent="register" class="form">
      <div class="form-item">
        <label for="username">用户名:</label>
        <ElInput v-model="form.user_name" placeholder="请输入用户名" required></ElInput>
      </div>

      <div class="form-item">
        <label for="id">用户id:</label>
        <ElInput v-model="form.user_id" placeholder="请输入用户id" required></ElInput>
      </div>

      <div class="form-item">
        <label for="password">密码:</label>
        <ElInput type="password" v-model="form.password" placeholder="请输入密码" required></ElInput>
      </div>

      <div class="form-item">
        <label for="email">邮箱:</label>
        <ElInput type="email" v-model="form.email" placeholder="请输入邮箱" required></ElInput>
      </div>

      <ElButton type="primary" nativeType="submit">注册</ElButton>
    </form>

    <p v-if="errorMessage">{{ errorMessage }}</p>
  </div>
</template>

<style>
.register-form {
  margin: 0 auto;
  max-width: 400px;
}

.form {
  display: flex;
  flex-direction: column;
}

.form-item {
  margin-bottom: 10px;
}
</style>

<script>
import { ElMessage } from 'element-plus'
import axios from 'axios';

export default {
  data() {
    return {
      form: {},
      errorMessage: ''
    };
  },
  methods:{
    register(){

      // const response = await axios.post('/Login', this.form);
      this.form.user_id = Number(this.form.user_id)
      console.log(this.form);


      this.$http.post("http://localhost:8080/user/add",this.form).then((res )=>{
        console.log(res.data)
        if(res.data ==1){
          console.log("添加成功！");
          ElMessage({
            message: '添加成功!',
            type: 'success',
          })
          this.router.push({
            path:"/Login"     //是Vue Router中的路由跳转方法，用于在应用程序中进行页面跳转
          })
          this.form = {} //
        }else{
          ElMessage({
            message: '添加失败!',
            type: 'success',
          })
          console.log("添加失败！");
        }
      }).catch((err)=>{})
    },
  }
}

</script>